<script setup lang="ts">
import { reactive, ref } from "vue"
import { getBillUploadLogApi } from "@/api/bill"

const dialogFormVisible = ref(false)
const formLabelWidth = "140px"

const form = reactive({
  createTimeStart: "",
  createTimeEnd: "",
  logType: "received",
  logStatus: 1
})

const getBillUploadLogs = async () => {
  await getBillUploadLogApi(form).then((res: any) => {
    tableData.value = res.data.list
  })
}

const tableData = ref<any[]>([])
const closes = () => {
  dialogFormVisible.value = false
  emit("uploadLogClose", true)
}
const emit = defineEmits(["uploadLogClose"])
const uploadShow = async () => {
  // 获取上传日志
  await getBillUploadLogs()
  dialogFormVisible.value = true
}

defineExpose({ uploadShow })
</script>

<template>
  <el-dialog v-model="dialogFormVisible" title="日志记录" width="80%">
    <el-form :model="form" :inline="true">
      <el-form-item label="创建时间" :label-width="formLabelWidth">
        <el-date-picker
          v-model="form.createTimeStart"
          format="YYYY/MM/DD hh:mm:ss"
          value-format="YYYY-MM-DD hh:mm:ss"
          type="datetime"
          placeholder="请选择"
        />
        <span style="margin-right: 10px; margin-left: 10px">-</span>
        <el-date-picker
          v-model="form.createTimeEnd"
          format="YYYY/MM/DD hh:mm:ss"
          value-format="YYYY-MM-DD hh:mm:ss"
          type="datetime"
          placeholder="请选择"
        />
      </el-form-item>
    </el-form>
    <el-table :data="tableData" border>
      <el-table-column type="expand">
        <template #default="props">
          <div m="4">
            <p m="t-0 b-2">创建时间: {{ props.row.create_time }}</p>
            <p m="t-0 b-2">操作人: {{ props.row.admin_text }}</p>
            <h3>上传记录</h3>
            <el-table :data="props.row.content" border>
              <el-table-column label="时间" prop="create_time" />
              <el-table-column label="票面金额（万）" prop="billAmount" />
              <el-table-column label="票号" prop="billNo" width="280" />
              <el-table-column label="实付/实收金额" prop="enter_finally" />
              <el-table-column label="每十万价格" prop="enter_price" />
              <el-table-column label="贴息费用" prop="enter_discount" />
            </el-table>
          </div>
        </template>
      </el-table-column>

      <el-table-column property="create_time" label="时间" width="200" />
      <el-table-column property="admin_text" label="名称" />
    </el-table>
    <template #footer>
      <span class="dialog-footer">
        <el-button type="primary" @click="closes">确认</el-button>
      </span>
    </template>
  </el-dialog>
</template>

<style scoped lang="scss">
.el-button--text {
  margin-right: 15px;
}

.el-select {
  width: 300px;
}

.el-input {
  width: 300px;
}

.dialog-footer button:first-child {
  margin-right: 10px;
}
</style>
